﻿@{
    ViewBag.Title = "Edit";
}




<div>
    <a data-bind="click:SaveShowCase" class="t-button">保存</a>
    <a class="t-button">删除</a>
</div>

<div>
    Title: <input type="text" data-bind="value:Title"/>
</div>
<hr class="separator-hr">
<div>
    <a data-bind="click:AddItem" class="t-button">添加</a>
</div>

<!-- ko foreach: ShowCaseListItemProductModels-->
<div style="float: left;width:160px">
    <div>
        <img style="max-width: 140px;max-height: 140px;width:140px;height: 140px" data-bind="attr: { src: ProductPictureUrl }"/>
    </div>
    <div style="height: 30px">
        <span data-bind="text:ProductName"></span>
    </div>
    <div>
        <input type="text" data-bind="value:ProductUrl"/>
    </div>
    <div>
        <input type="text" data-bind="value:Sort"/>
    </div>
    <div>
        <a data-bind="click:$root.DeleteItem" >删除</a>
    </div>

</div>
<!--/ko-->

<script>

   
    function ShowCaseListItemProductModels(productId,productPictureUrl, productName, productUrl,sort) {

        var self = this;
        self.ProductId = ko.observable(productId);
        self.ProductUrl= ko.observable(productUrl);
        self.ProductPictureUrl = ko.observable(productPictureUrl);
        self.ProductName = ko.observable(productName);
        self.Sort = ko.observable(sort);

        self.ProductUrl.subscribe(function (newValue) {
            self.PopulteProduct(newValue);
        });

        self.PopulteProduct = function(newUrl) {
            $.get('/api/ShowCaseApi/GetProduct?productUrl=' + newUrl, function (data) {
                self.ProductId(data.ProductId);
                self.ProductUrl(data.ProductUrl);
                self.ProductPictureUrl(data.ProductPictureUrl);
                self.ProductName(data.ProductName);
            });
        };
    }
 

    function ShowCaseEditModel(title,id, items) {
        var self = this;
        self.Title = ko.observable(title);
        self.Id= ko.observable(id);

        var tempItems= $.map(items, function (a) {
            return new ShowCaseListItemProductModels(a.ProductId,a.ProductPictureUrl,a.ProductName,a.ProductUrl,a.Sort);
        });

       
        self.ShowCaseListItemProductModels = ko.observableArray(tempItems);

        self.AddItem= function () {
            self.ShowCaseListItemProductModels.push(new ShowCaseListItemProductModels());
        };

        self.DeleteItem = function (item) {
            self.ShowCaseListItemProductModels.remove(item);
        };
        
        self.SaveShowCase = function() {
            //$.post('/api/ShowCaseApi/Save', ko.toJSON(self), function(result) {

              
            //});
            $.ajax({
                url: "/api/ShowCaseApi/Save",
                type: 'post',
                data: ko.toJSON(self),
                contentType: 'application/json',
                success: function (result) {
                    if (result.Success) {
                        alert("保存成功");
                    }
                    else {
                        alert("保存失败：" + result.Msg);
                    }
                }
            });
           
        };
    }

    
    
    function initEdit() {
        $.get("/api/ShowCaseApi/Get?showCaseId=@ViewBag.ShowCaseId", function (data) {

            var vm = new ShowCaseEditModel(data.Title, data.Id,data.ShowCaseListItemProductModels);

            ko.applyBindings(vm);
        }, 'json');
    }


    function initCreate() {
        var vm = new ShowCaseEditModel();
        ko.applyBindings(vm);
    }
    
    $(document).ready(function() {
        @if (ViewBag.ShowCaseId == 0)
        {
            <text>
                initCreate();
            </text>
        }
        else
        {
            <text>
                initEdit();
            </text>
        }
    });
    
</script>